import {Component} from 'react';
import React from 'react';
import {connect} from 'umi';
import HighPerformTable from '@/components/HighPerformTable';
import APIS from '@/apis';
import {PlusOutlined} from '@ant-design/icons';
import {Button, Input} from 'antd';
import ImageUpload from '@/components/ImageUpload';
// import ImageUploadTemp from '@/components/ImageUploadTeam';
import URLS from '@/apis/APIUrlDefine';
import {FormInstance} from 'antd/lib/form';
import "./index.less"

class CourseMemberEditor extends Component<any, any> {
  actionRef: any;
  ref: any;

  constructor(props: any) {
    super(props);
    this.state = {
      // url:null
      url: undefined,
    }
  }

  requestGetData(
    params: {
      pageSize?: number;
      current?: number;
    },
    sorter: {
      [key: string]: 'ascend' | 'descend';
    },
    filter: {
      [key: string]: React.ReactText[];
    },
  ) {

    return APIS.CourseAPI.GetCourseMemberList({...params, sorter, filter, courseId: this.props.courseId});
  }

  handleUpdateModalVisible(value: boolean) {
  }

  OnRef = (ref) => {
    this.ref = ref;
  }
  formInstance: FormInstance;
  clomns: any = [
    {
      title: '姓名',
      dataIndex: 'name',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '姓名为必填项',
          },
        ]
      },
      renderFormItem: (item: any, config: any, form: FormInstance) => {
        return <Input onChange={(ev) => form.setFieldsValue({"name": ev.target.value})}></Input>
      },
    },
    {
      title: '头像',
      dataIndex: 'avatar',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '头像为必填项',
          },
          ({ getFieldValue }) => ({
            validator:(_, value)=> {
              if (this.state.url!==null) {
                return Promise.resolve();
              }
              return Promise.reject(new Error('头像为必填项'));
            },
          }),
        ]
      },
      render: (item: any) => {
        return <img style={{width: "100px", height: "100px", objectFit: "contain"}}
                    src={URLS.SERVER_PICTURE_URL + item}></img>
      },
      renderFormItem: (item: any, config: any, form: FormInstance) => {
        return <ImageUpload preImage={this.state.url} des={[]} handleImageChange={(url: any) => { 
             form.setFieldsValue({"avatar": url}); 
         /*  let current = this.actionRef.getCurrentSelect();
          if(current){
              current.avatar = url;
              this.actionRef.handleUpdateCurrent(current)
          } */
          this.setState({url});
        }
        }
        />
      }
      ,
    },
    {
      title: '职称',
      dataIndex: 'titles',
      formItemProps: {
        rules: [
          {
            required: true,
            message: '职称为必填项',
          },
        ]
      },
      renderFormItem: (item: any, config: any, form: FormInstance) => {
        return <Input onChange={(ev) => form.setFieldsValue({"titles": ev.target.value})}></Input>
      },
    },
    {
      title: '联系方式',
      dataIndex: 'tel',
      valueType: "tel",

      renderFormItem: (item: any, config: any, form: FormInstance) => {
        return <Input onChange={(ev) => form.setFieldsValue({"tel": ev.target.value})}></Input>
      },
    },
    {
      title: '详细介绍',
      dataIndex: 'description',
      width: "45%",
      render: (item: any) => {
        return <span className="course-editor-description">{item}</span>
      },
      // valueType: "textarea",
      formItemProps: {
        rules: [
          {
            required: true,
            message: '介绍为必填项',
          },
        ]
      },
      renderFormItem: (item: any, config: any, form: FormInstance) => {
        return <Input onChange={(ev) => form.setFieldsValue({"description": ev.target.value})}></Input>
      },
    },
    {
      title: '排序',
      dataIndex: 'order',
      valueType: "number",
      renderFormItem: (item: any, config: any, form: FormInstance) => {
        return <Input onChange={(ev) => form.setFieldsValue({"order": ev.target.value})} type="number" max="100" min="1"
                      placeholder="请输入1到100的数字"></Input>
      },
    },
    {
      title: '更新时间',
      dataIndex: 'updatedTime',
      hideInForm: true,
    },
  ];

  render() {
    return (
      <div>
        <HighPerformTable<any>
          columns={this.clomns}
          action={this.props.action}
          requestGetData={this.requestGetData.bind(this)}
          ref={(ref) => (this.actionRef = ref)}
          handleChangeState={(data, state) => {
            return APIS.CourseAPI.ChangeCourseMemberState({id: data.id, state: state === true ? 1 : 0})
          }}
          onClickUpdate={record => {
            this.setState({url: record.avatar});
            this.actionRef.handleUpdateModalVisible(true, record)
          }}
          handleUpdate={record => {
            record.avatar =this.state.url;
            return APIS.CourseAPI.UpdateCourseMember(record)
          }}
          handleDelete={record => {
            return APIS.CourseAPI.DeleteCourseMember(record)
          }}
          toolBarRender={() => [
            this.props.isShow ?
              <Button key="btn" type="primary" onClick={() => {this.setState({url:null}); this.actionRef.handleModalVisible(true)}}>
                <PlusOutlined/>
                新增成员
              </Button> : <></>
          ]}
          handleAdd={data => {
            return APIS.CourseAPI.CreateCourseMember({...data, courseId: this.props.courseId})
          }}
        />
      </div>
    );
  }
}

export default connect()(CourseMemberEditor);
